<template>
  <view class="broken-apply">
    <!-- 表单内容 -->
    <view class="form-content">
      <!-- 基本信息 -->
      <view class="form-item">
        <view class="store-name">{{machineInfo.storeName||'-'}}</view>
        <view class="info-row" style="display:flex;">
          <view class="label">柜机序列号</view>
          <view class="value">{{ machineInfo.serialNumber||'-' }}</view>
        </view>
        <view class="info-row">
          <view class="label">联系人</view>
          <view class="desc-inputText">
            <input type="text" v-model="formData.contact" placeholder="请输入..." />
          </view>
        </view>
        <view class="info-row">
          <view class="label">联系电话</view>
          <view class="desc-inputText">
            <input type="number" v-model="formData.contactNumber" placeholder="请输入..." />
          </view>
        </view>
        <view class="info-row">
          <view class="label">问题描述</view>
          <textarea class="desc-input" v-model="formData.faultDescribe" placeholder="请输入..." :maxlength="200" />
        </view>
        <view class="section-title">上传图片</view>
        <upload-image v-model="formData.imageList" :max-count="8" @upload-error="handleUploadError" />
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn" @click="handleSubmit">
      <text>提交</text>
    </view>

    <!-- 查看历史记录 -->
    <view class="history-link" @click="toHistory">
      <text>查看历史反馈</text>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { addbroken } from '@/api/broken'
  import UploadImage from '@/components/Upload/index.vue'

  const machineInfo = ref({})
  // 表单数据
  const formData = ref({
    contact: '',
    contactNumber: '',
    faultDescribe: '',
    imageList: [],
    cabinetId: ''
  })

  onLoad((option) => {
    machineInfo.value = uni.getStorageSync('machineInfo') || {}
    formData.value.cabinetId = machineInfo.value.id
  })

  // 图片上传失败
  const handleUploadError = (error) => {
    console.log('图片上传失败：', error)
  }

  // 验证电话号码
  const validatePhone = (phone) => {
    const reg = /^1[3-9]\d{9}$/
    return reg.test(phone)
  }

  // 提交表单
  const handleSubmit = () => {
    if (!formData.value?.contactNumber) {
      uni.showToast({
        title: '请输入联系电话',
        icon: 'none'
      })
      return
    }

    if (!validatePhone(formData.value.contactNumber)) {
      uni.showToast({
        title: '请输入正确的手机号码',
        icon: 'none'
      })
      return
    }

    if (!formData.value?.faultDescribe) {
      uni.showToast({
        title: '请输入问题描述',
        icon: 'none'
      })
      return
    }

    if (!formData.value?.imageList?.length) {
      uni.showToast({
        title: '请上传图片',
        icon: 'none'
      })
      return
    }

    // 处理表单数据
    const submitData = {
      ...formData.value,
      image: formData.value.imageList.join(',')
    }
    delete submitData.imageList

    addbroken(submitData).then(res => {
      if (res.code == 200) {
        uni.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 2000,
          success: () => {
            setTimeout(() => {
              uni.navigateBack()
            }, 2000)
          }
        })
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    })
  }

  // 返回上一页
  const goBack = () => {
    uni.navigateBack()
  }

  // 跳转到历史记录
  const toHistory = () => {
    uni.navigateTo({
      url: '/pages/broken/index'
    })
  }
</script>

<style lang="scss" scoped>
  .broken-apply {
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 120rpx;

    .form-content {
      padding: 22rpx;

      .form-item {
        background: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;

        .store-name {
          font-size: 34rpx;
          color: #333;
          padding-bottom: 20rpx;
          border-bottom: 1rpx solid #f5f5f5;
        }

        .info-row {
          display: block;
          margin-bottom: 10rpx;
          margin-top: 18rpx;
          color: #6B7280;

          .label {
            width: 140rpx;
            font-size: 28rpx;
          }

          .value {
            flex: 1;
            font-size: 28rpx;
            text-align: right;
          }

          .desc-input,
          .desc-inputText {
            width: 94%;
            height: 160rpx;
            background: #f8f8f8;
            border-radius: 18rpx;
            padding: 20rpx;
            margin: 24rpx 0;
            font-size: 28rpx;
            color: #333;
          }

          .desc-inputText {
            height: 40rpx;
          }
        }
      }

      .section-title {
        font-size: 28rpx;
        color: #999;
        margin-bottom: 20rpx;
      }

      .upload-content {
        .image-list {
          display: flex;
          flex-wrap: wrap;
          gap: 20rpx;

          .image-item {
            width: 146rpx;
            height: 146rpx;
            position: relative;

            image {
              width: 100%;
              height: 100%;
              border-radius: 8rpx;
            }

            .delete-btn {
              position: absolute;
              top: -18rpx;
              right: -18rpx;
              width: 42rpx;
              height: 42rpx;
              background: rgba(0, 0, 0, 0.5);
              border-radius: 50%;
              color: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 22rpx;
            }
          }

          .upload-btn {
            width: 140rpx;
            height: 140rpx;
            background: #fff;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed #ddd;

            image {
              width: 30rpx;
              height: 30rpx;
            }
          }
        }
      }
    }

    .submit-btn {
      height: 88rpx;
      margin: 20rpx;
      background: #3B82F6;
      border-radius: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 32rpx;
      font-weight: 500;
    }

    .history-link {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 50rpx;
      text-align: center;
      color: #3D3D3D;
      font-size: 28rpx;
    }
  }
</style>